<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="MyServlet.Candidate2"%>
<%@ page import="MyServlet.Position2"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<link type="text/css" href="css/menu.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.10.0.custom.min.css"
	rel="stylesheet" />
<link type="text/css" href="css/menu.css" rel="stylesheet" />
<link type="text/css" href="css/popup.css" rel="stylesheet" />
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script>
$(function() {
	$("#tabs").tabs();
});
$(document).ready(function() {
    $(".cand").change(function() {
        var $this = $(this);
        $this.siblings(".cand").append($this.find('option:selected')); // append selected option to sibling
        $(".cand", $this.parent()).each(function(i,v){ // loop through relative selects
            var $options = $(v).find('option'); // get all options
            $options = $options.sort(function(a,b){ // sort by value of options
                return a.value - b.value;
            });
            $(this).html($options); // add new sorted options to select
        });
    });   
});
</script>

</head>
<body>

	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Users</a></li>
			<li><a href="#tabs-2">Positions</a></li>
			<li><a href="#tabs-3">Candidates</a></li>
			<li><a href="#tabs-4">Approve positions</a></li>
		</ul>
		<div id="tabs-1">
			<div id="myDiv2">

				<a style="float: left;" href="#loginmodal3" class="flatbtn"
					id="modaltrigger3"><button>+</button></a>

				<div id="loginmodal3" class="popupMany" style="display: none;">
					<h1>Add user</h1>
					<form id="loginform" name="loginform" method="post" action="CrudUser">
						<label for="firstname">Firstname:</label> 
						<input type="text" name="firstname" id="firstname" class="txtfield" tabindex="1">

						<label for="lastname">Lastname:</label> 
						<input type="text" name="lastname" id="lastname" class="txtfield" tabindex="2">

						<label for="email">Email:</label> 
						<input type="text" name="email"	id="email" class="txtfield" tabindex="3"> 
						
						<label for="mobile">Mobile:</label> 
						<input type="text" name="mobile" id="mobile" class="txtfield" tabindex="4"> 
						
						<label for="phone"> Phone:</label>
						<input type="text" name="phone" id="phone" class="txtfield" tabindex="5">
						 
						<label for="password">Password:</label> 
						<input type="text" name="password" id="password" class="txtfield" tabindex="7">


						<label for="function">Function:</label> 
						<select name="function">
							<option value="Programmer">Programmer</option>
							<option value="TeamLeader">TeamLeader</option>
							<option value="ServerAdmin">ServerAdmin</option>
							<option value="AppAdmin">AppAdmin</option>
						</select> 
						
						<label for="roles">Role:</label> 
						<select name="roles">
							<option value="Director General">Director General</option>
							<option value="Director HR">Director HR</option>
							<option value="Administrator">Administrator</option>
							<option value="Recruiter">Recruiter</option>
							<option value="Director de Departament">Director de Departament</option>
						</select>  
						
						<br> <br>
						<div class="center">
							<input type="submit" name='option' value='add' id="loginbtn"
								class="flatbtn-blu hidemodal">
						</div>
					</form>
				</div>

				<br> <br>

				<c:if test="${!empty userActiveList }">
					<c:forEach items="${userActiveList}" var="user">
						<div>
							<form id="loginform" name="loginform" method="post"
								action="CrudUser">
							<input style="visibility: hidden" class="inputtext" type="text"
														name="id" value="${user.id}" />
								<table style="border-bottom-style: solid;">
									<tr>
										<td><a href="CrudUser?id=${user.id}&option=delete"><span class="myButton">Delete</span></a></td>
										<td>
											<table>
												<tr>
													<td>First name: ${user.firstName}</td>
												</tr>
												<tr>
													<td>Last name: ${user.lastName}</td>
												</tr>
												<tr>
													<td>Email: ${user.email}</td>
												</tr>
												<tr>
													<td>Mobile: ${user.mobileNo}</td>
												</tr>
												<tr>
													<td>Phone: ${user.telephoneNo}</td>
												</tr>
												<tr>
													<td>Function: ${user.fun}</td>
												</tr>
												<tr>
													<td>Username: ${user.userName}</td>
												</tr>
												
													<tr>
													<td>Roles: <c:if test="${!empty user.roles}">
															<c:forEach items="${user.roles}" var="userRoles">
																<c:out value="${userRoles.title}" />
															</c:forEach>
														</c:if>
													</td>
												</tr>
											
											</table>
										</td>
										<td><img src="images/user.jpg" height="150" width="250"></td>
										<td>
											<table>
												<tr>
													<td>First name:</td>
													<td><input class="inputtext" type="text"
														name="firstname" /></td>
												</tr>
												<tr>
													<td>Last name:</td>
													<td><input class="inputtext" type="text"
														name="lastname" /></td>
												</tr>
												<tr>
													<td>Email:</td>
													<td><input class="inputtext" type="text" 
														name="email" /></td>
												</tr>
												<tr>
													<td>Mobile:</td>
													<td><input class="inputtext" type="text"
														name="mobileno" /></td>
												</tr>
												<tr>
													<td>Phone:</td>
													<td><input class="inputtext" type="text"
														name="telephoneno" /></td>
												</tr>
												<tr>
													<td>Password:</td>
													<td><input class="inputtext" type="text"
														name="password" /></td>
												</tr>
												<tr>
													<td>Function:</td>
													<td><select name="function">
															<option value="Programmer">Programmer</option>
															<option value="TeamLeader">TeamLeader</option>
															<option value="ServerAdmin">ServerAdmin</option>
															<option value="AppAdmin">AppAdmin</option>
													</select></td>
												</tr>
												<tr>
													<td>Roles:</td>
													<td><select name="roles">
														<option value="Director General">Director General</option>
														<option value="Director HR">Director HR</option>
														<option value="Administrator">Administrator</option>
														<option value="Recruiter">Recruiter</option>
														<option value="Director de Departament">Director de Departament</option>
													</select> </td>
												</tr>
											</table>
										</td>
										<td><input type="submit" tabindex="4" name="option"
											value="update" /></td>
									</tr>
								</table>
							</form>
						</div>
					</c:forEach>
				</c:if>
			</div>
		</div>
		<div id="tabs-2">
			<div id="myDiv2">
				<a style="float: left;" href="#loginmodal" class="flatbtn"
					id="modaltrigger"><button>+</button></a>

				<div id="loginmodal" class="popupMany" style="display: none;">
					<h1>Add position</h1>
					<form id="loginform" name="loginform" method="POST"
						action="CrudPosition">
						<label>Position name:</label> <input type="text"
							name="positionName" id="positionName" class="txtfield"
							tabindex="1"> <label>Total places:</label> <input
							type="text" name="totalPlaces" id="totalPlaces" class="txtfield"
							tabindex="2"> <label>Project:</label> <input type="text"
							name="project" id="project" class="txtfield" tabindex="2">

						<label>Requirements:</label>
						<textarea style="resize: none;" name="requirements" rows="4"
							cols="30">
			   </textarea>
						<label for="password">Department:</label> <select
							name="department">
							<option value="gba">GBA</option>
							<option value="gbc">GBC</option>
							<option value="msa">MSA</option>
							<option value="mng">MNG</option>
						</select> <label>Responsibilities:</label>
						<textarea style="resize: none;" name="responsibilities" rows="4"
							cols="30">
						</textarea>

						<br> <br>
						<div class="center">
							<input type="submit" id="loginbtn" class="flatbtn-blu hidemodal"
								name='option' value='add'>
						</div>
					</form>
				</div>
				<br> <br>

				<c:if test="${!empty approvedPositionList }">
					<c:forEach items="${approvedPositionList}" var="position">
						<div>
							<form action="CrudPosition" method="POST">
							<input style="visibility: hidden" class="inputtext" type="text"
								name="id" value="${position.id}" />
									<table style="border-bottom-style: solid;">
									<tr>
										<td>
											<table>
												<tr>
													<td>Name: ${position.name}</td>
												</tr>
												<tr>
													<td>Total places: ${position.totalPlaces}</td>
												</tr>
												<tr>
													<td>Project: ${position.project}</td>
												</tr>
												<tr>
													<td>Requirements: ${position.requirements}</td>
												</tr>
												<tr>
													<td>Department: ${position.department["name"]}</td>
												</tr>
												<tr>
													<td>Responsibilities: ${position.responsibilities}</td>
												</tr>
												<tr>
												
												<td>Candidates: <c:if test="${!empty position.candidates}">
															<c:forEach items="${position.candidates}" var="candidate">
																<c:out value="${candidate.firstName}" />
															</c:forEach>
														</c:if>
													</td>
												</tr>
												<tr>
													<td>Active: ${position.active}</td>
												</tr>

											</table>
										</td>
										<td><img src="images/user.jpg" height="150" width="250"></td>
										<td>
											<table>
												<tr>
													<td>Name:</td>
													<td><input class="inputtext" type="text" name="name" /></td>
												</tr>
												<tr>
													<td>Total places:</td>
													<td><input class="inputtext" type="text"
														name="totalPlaces" /></td>
												</tr>
												<tr>
													<td>Project:</td>
													<td><input class="inputtext" type="text"
														name="project" /></td>
												</tr>
												<tr>
													<td>Requirements:</td>
													<td><input class="inputtext" type="text"
														name="requirements" /></td>
												</tr>
												<tr>
													<td>Department:</td>
													<td><select name="department">
															<option value="gba">GBA</option>
															<option value="gbc">GBC</option>
															<option value="msa">MSA</option>
															<option value="mng">MNG</option>
													</select></td>
												</tr>
												<tr>
													<td>Responsibilities:</td>
													<td><input class="inputtext" type="text"
														name="responsibilities" /></td>
												</tr>
												<tr>
													<td>Candidates:</td>
													<td>
													<c:if test="${!empty candidateList }">
													<select multiple id="select1" class = "cand">
														<c:forEach items="${candidateList}" var="candidate">
															    <option value="${candidate.firstName}">${candidate.firstName}</option>
															
														</c:forEach>
														</select>
													</c:if>
													<select multiple id="select2" name="selectedCand" class = "cand"></select>
													</td>
												</tr>
												<tr>
												<c:if test="${position.active eq false}">
													<td><input type="checkbox" name="active"
														value="active" >Active <br></td>
												</c:if>
												<c:if test="${position.active eq true}">
													<td><input type="checkbox" name="active"
														value="active" checked>Active <br></td>
												</c:if>	
												</tr>

											</table>

										</td>
										<td><input type="submit" tabindex="4" name='option'
											value='update' /></td>
									</tr>
								</table>
							</form>
						</div>
					</c:forEach>
				</c:if>
			</div>
		</div>
		<div id="tabs-3">
			<div id="myDiv2">
				<a style="float: left;" href="#loginmodal2" class="flatbtn"
					id="modaltrigger2"><button>+</button></a>

				<div id="loginmodal2" class="popupMany" style="display: none;">
					<h1>Add candidate</h1>
					<form id="loginform" name="loginform" method="POST"
						action="CrudCandidate">
					 <label for="Firstname">Firstname:</label>
						<input type="text" name="firstname" id="firstname"
							class="txtfield" tabindex="1"> <label for="Lastname">Lastname:</label>
						<input type="text" name="lastname" id="lastname" class="txtfield"
							tabindex="2"> <label for="CV">CV:</label> <input
							type="text" name="cv" id="cv" class="txtfield" tabindex="2">
						<button>Upload CV</button>

						<label for="email">Email:</label> <input type="text" name="email"
							id="email" class="txtfield" tabindex="3"> <label
							for="mobile">Mobile:</label> <input type="text" name="mobile"
							id="mobile" class="txtfield" tabindex="4"> <label
							for="phone">Phone:</label> <input type="text" name="phone"
							id="phone" class="txtfield" tabindex="5"> <label
							for="address">Address:</label> <input type="text" name="address"
							id="address" class="txtfield" tabindex="3"> <label
							for="realocate">Realocate:</label> <select name="realocate">
							<option value="yes">Yes</option>
							<option value="no">No</option>
						</select> <br> <br>
						<div class="center">
							<input type="submit" name='option' value='add' id="loginbtn"
								class="flatbtn-blu hidemodal" tabindex="3">
						</div>
					</form>
				</div>

				<br> <br>
				<c:if test="${!empty candidateList }">
					<c:forEach items="${candidateList}" var="candidate">
						<div>
							<form action="CrudCandidate" method="POST">
							<input style="visibility: hidden" class="inputtext" type="text"
														name="id" value="${candidate.id}" />
								<table style="border-bottom-style: solid;">
									<tr>
										
										<td><a href="CrudCandidate?id=${candidate.id}&option=delete">
													Delete</a>
										<td>
											<table>
												<tr>
													<td>First name: ${candidate.firstName}</td>
												</tr>
												<tr>
													<td>Last name: ${candidate.lastName}</td>
												<tr>
													<td>Email: ${candidate.email}</td>
												</tr>
												<tr>
													<td>Mobile: ${candidate.mobileNo}</td>
												</tr>
												<tr>
													<td>Telephone: ${candidate.telephoneNo}</td>
												</tr>
												<tr>
													<td>Address: ${candidate.address}</td>
												</tr>
												<tr>
													<td>Realocate: ${candidate.realocate}</td>
												</tr>
												<tr>
													<td>Comments: ${candidate.comments}</td>
												</tr>

											</table>
										</td>
										<td><img src="images/user.jpg" height="150" width="250"></td>
										<td>
											<table>
												<tr>
													<td>First name:</td>
													<td><input class="inputtext" type="text"
														name="firstname" /></td>
												</tr>
												<tr>
													<td>Last name:</td>
													<td><input class="inputtext" type="text"
														name="lastname" /></td>
												</tr>
												<tr>
													<td>Email:</td>
													<td><input class="inputtext" type="text" name="email" /></td>
												</tr>
												<tr>
													<td>Mobile:</td>
													<td><input class="inputtext" type="text"
														name="mobileno" /></td>
												</tr>
												<tr>
													<td>Telephone:</td>
													<td><input class="inputtext" type="text"
														name="telephone" /></td>
												</tr>
												<tr>
													<td>Address:</td>
													<td><input class="inputtext" type="text"
														name="address" /></td>
												</tr>
												<tr>
													<td>Realocate:</td>
													<td><input class="inputtext" type="text"
														name="realocate" /></td>
												</tr>
												<tr>
													<td>Comments:</td>
													<td><input class="inputtext" type="text"
														name="comments" /></td>
												</tr>
												
											</table>

										</td>
										<td><input type="submit" tabindex="4" name='option'
											value='update' /></td>
									</tr>
								</table>
							</form>
						</div>
					</c:forEach>
				</c:if>
			</div>
		</div>
		<div id="tabs-4">
			<c:if test="${!empty unApprovedPositionList }">
				<c:forEach items="${unApprovedPositionList}" var="position">
					<div>
						<form action="CrudPosition"
							method="POST">
							<input style="visibility: hidden" class="inputtext" type="text"
							name="id" value="${position.id}" />
							<table style="border-bottom-style: solid;">
								<tr>
									<td>
										<table>
											<tr>
												<td>Name: ${position.name}</td>
											</tr>
											<tr>
												<td>Total places: ${position.totalPlaces}</td>
											</tr>
											<tr>
												<td>Project: ${position.project}</td>
											</tr>
											<tr>
												<td>Requirements: ${position.requirements}</td>
											</tr>
											<tr>
												<td>Department: ${position.department["name"]}</td>
											</tr>
											<tr>
												<td>Responsibilities: ${position.responsibilities}</td>
											</tr>
											<tr>
												<td>Active: ${position.active}</td>
											</tr>

										</table>
									</td>
									<td><img src="images/user.jpg" height="150" width="250"></td>
									<td><input type="submit" name="option" value='approve'/></td>
								</tr>
							</table>
						</form>
					</div>
				</c:forEach>
			</c:if>
		</div>
	</div>

</body>
</html>